<link rel="stylesheet" href="/assets/home/css/email.css">

<header class="mui-bar mui-bar-nav mui-bar-nav-bg">
    <a id="icon-menu" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">邮箱认证</h1>
</header>

<div class="user">
    <div class="avatar wow fadeInUp">
        <img src="/assets/home/images/avatar.jpg" />
    </div>
</div>

<form class="mui-input-group" method="post" enctype="multipart/form-data">
    <div class="mui-input-row">
        <label>邮箱：</label>
        <input type="text" name="email" id="email" value="{$auth.email}" class="mui-input-clear" placeholder="请输入邮箱"
            required readonly />
    </div>

    <div class="mui-input-row">
        <label>验证码：</label>
        <input type="text" name="code" class="mui-input-clear" placeholder="请输入验证码" required />
    </div>


    <div class="mui-button-row">
        <button type="submit" class="mui-btn mui-btn-primary">确认</button>
        <button type="button" id="send" class="mui-btn mui-btn-success">发送邮件</button>
    </div>
</form>

<script>
    var sec = 60
    var T

    $("#send").click(async function () {
        //轻提醒
        mui.toast('发送验证码成功', { duration: 3000 })

        let email = $.trim($('#email').val()) ?? '';

        if (!email) {
            mui.toast('邮箱不能空');

            return false;
        }

        let result = await POST({
            url: 'business/send',
            params: {
                email
            }
        });

        if (result.code === 1) {
            // 轻提醒
            mui.toast(result.msg, { duration: 2000 });

            // 倒计时
            $(this).html(sec);
            $(this).attr('disabled', true);
            T = setInterval(autoplay, 10);

            return false;
        } else {
            // 轻提醒
            mui.toast(result.msg, { duration: 2000 });

            return false;
        }
    })

    function autoplay() {
        var num = $("#send").html()
        num = parseInt(num)

        if (num <= 0) {
            //停止定时器
            clearInterval(T)
            $("#send").removeAttr('disabled')
            $("#send").html('重新发送验证码')
        } else {
            $('#send').html(num - 1)
        }
    }
</script>